<template>
  <div class="panel-common">
    <div class="block">
      <div class="dt">背景</div>
      <div class="dd" v-if="false">
        <!-- 这个功能暂不实现 -->
        <div class="common-background">
          <upload @on-success="imgUpdateSuccessHandle">
            <el-image v-if="background" :src="background" fit="contain" />
            <el-button v-else class="button-upload" icon="el-icon-plus" plain></el-button>
          </upload>
        </div>
      </div>
      <div class="dd">
        <div class="switch-item">
          <div class="switch-item-label">
            是否保留底边距
          </div>
          <el-switch
            :value="isMarginBottom"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="onChangeMarginBottom"
          >
          </el-switch>
        </div>
      </div>
    </div>


    <!-- 以下暂时不用 -->
    <div class="block" v-if="false">
      <!-- 这个功能暂不实现 -->
      <div class="dt">内间距</div>
      <div class="dd">
        <el-form :mode="form">
          <el-input v-model="form.paddingTop" @change="(val) => onChange(val, 'paddingTop')">
            <template slot="prepend">上</template>
            <template slot="append">px</template>
          </el-input>
          <el-input v-model="form.paddingRight" @change="(val) => onChange(val, 'paddingRight')">
            <template slot="prepend">右</template>
            <template slot="append">px</template>
          </el-input>
          <el-input v-model="form.paddingBottom" @change="(val) => onChange(val, 'paddingBottom')">
            <template slot="prepend">下</template>
            <template slot="append">px</template>
          </el-input>
          <el-input v-model="form.paddingLeft" @change="(val) => onChange(val, 'paddingLeft')">
            <template slot="prepend">左</template>
            <template slot="append">px</template>
          </el-input>
        </el-form>
      </div>
    </div>
    <div class="block" v-if="false">
      <!-- 这个功能暂不实现 -->
      <div class="dt">外间距</div>
      <div class="dd">
        <el-form :mode="form">
          <el-input v-model="form.marginTop" @change="(val) => onChange(val, 'marginTop')">
            <template slot="prepend">上</template>
            <template slot="append">px</template>
          </el-input>
          <el-input v-model="form.marginRight" @change="(val) => onChange(val, 'marginRight')">
            <template slot="prepend">右</template>
            <template slot="append">px</template>
          </el-input>
          <el-input v-model="form.marginBottom" @change="(val) => onChange(val, 'marginBottom')">
            <template slot="prepend">下</template>
            <template slot="append">px</template>
          </el-input>
          <el-input v-model="form.marginLeft" @change="(val) => onChange(val, 'marginLeft')">
            <template slot="prepend">左</template>
            <template slot="append">px</template>
          </el-input>
        </el-form>
      </div>
    </div>
    <div class="block" v-if="false">
      <!-- 确定按钮不一定保留 -->
      <div class="dd">
        <div class="submit">
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Upload from '../../../upload'
import { mapState } from 'vuex'
import { STORE_NAMESPACE } from '../../../../config'
export default {
  name: 'PanelCommon',
  components: {
    Upload
  },
  data () {
    return {
      background: '',
      form: {
        paddingTop: 0,
        paddingRight: 0,
        paddingBottom: 0,
        paddingLeft: 0,
        marginTop: 0,
        marginRight: 0,
        marginBottom: 0,
        marginLeft: 0,
        background: ''
      }
    }
  },
  computed: {
    ...mapState({
      current: state => state[STORE_NAMESPACE].current,
      currentIndex: state => state[STORE_NAMESPACE].currentIndex
    }),
    isMarginBottom () {
      return this.current.isMarginBottom
    }
  },
  methods: {
    onChangeMarginBottom () {
      this.setData({
        isMarginBottom: !this.isMarginBottom
      })
    },
    imgUpdateSuccessHandle (file) {
      this.form.background = file.url
    },
    setData (data = {}) {
      this.$store.dispatch(`${STORE_NAMESPACE}/setData`, {
        type: 'update',
        index: this.currentIndex,
        value: {
          ...this.current,
          ...data
        }
      })
    },
    /**************分割线**************/
    onChange (val, field) {
      if (!/^[1-9]([0-9])*$/gi.test(val)) {
        this.$message.warning('仅支持输入正整数')
        this.form[field] = ''
        return
      }
      this.form[field] = val * 1
    },
    onSubmit () {
      this.$store.dispatch(`${STORE_NAMESPACE}/setData`, {
        type: 'update',
        index: this.currentIndex,
        value: {
          ...this.current,
          ...this.form
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.panel-common {
  .common-background {
    overflow: hidden;
    width: 60px;
    max-height: 60px;
  }
  & ::v-deep .el-input-group {
    width: 40%;
    margin: 0 20px 10px 0;
  }
  & ::v-deep .el-input-group__prepend,
  & ::v-deep .el-input-group__append {
    padding: 0 8px;
  }
  & ::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
}
</style>